<template>
  <nav class="navbar bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand" :href=data.url @click="reset()">
        <i class="bi bi-book-half"></i>
        学生实习系统
      </a>
      <a href="/login" class="btn btn-outline-light" @click="removeLocal" v-show="$route.meta.isLogin">退出登录</a>
    </div>
  </nav>
</template>

<script setup>
import {reactive} from "vue"
//引入store钩子
import useCounterStore from '@/stores/counter.js'
//实现仓库数据双向绑定
import {storeToRefs} from 'pinia'

//创建仓库对象
const store=useCounterStore()
let {isLogin}=storeToRefs(store)

const reset = ()=> {
  location.reload()
}

const data = reactive({
  url: localStorage.getItem("teacher") == null ? "/" : "/teacher"
})

const removeLocal = ()=> {
  localStorage.clear()
}

</script>

<style scoped>
.navbar {
  background: #19CAAD;
}
.navbar-brand,
.navbar-brand:focus,
.navbar-brand:hover {
  font-weight: 700;
  color: #fff;
}
.btn {
  font-size: 14px;
  
}
.btn:hover {
  color: #19CAAD;
}
</style>